<template>
	<div class="goods-list">
		<div class="classify">
			<div class="classify-box">
				<div class="box-title">
					<div>相关类别:</div>
				</div>
				<div class="box-content">
					<ul>
						<li v-for="(item, index) in data1">{{item.name}}</li>
					</ul>
				</div>
			</div>
			<div class="classify-box">
				<div class="box-title">
					<div>热门标签:</div>
				</div>
				<div class="box-content">
					<ul>
						<li>卫衣</li>
					</ul>
				</div>
			</div>

			<div class="filter">
				<ul>
					<li class="here">综合排序</li>
					<li>销量</li>
					<li>进度</li>
					<li>价格</li>
					<li>最新</li>
					<li>包邮<span></span></li>
				</ul>
			</div>
			<div class="all-goods">
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
				<goods-small></goods-small>
			</div>
			<div class="page-btns">
				<a href="">1</a>
				<a href="">2</a>
				<a href="">3</a>
				<a href="">4</a>
				<a href="">5</a>
				<a href="">6</a>
				<a href="">7</a>
				<span>···</span>
				<a href="">999</a>
			</div>
		</div>
	</div>
</template>

<script>
	import goodsSmall from "./goodsSmall.vue"
	export default {
		components: {
			goodsSmall,
		},
		data() {
			return {
				focus:{
					num:0,
				},
				data1: [{
					name: '卫衣',
				}, {
					name: 'POLO',
				}, {
					name: '运动户外',
				}, {
					name: '童装T恤',
				}, {
					name: '卫衣',
				}, {
					name: '棒球衫',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '珠宝饰品',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '手机壳',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}, {
					name: '卫衣',
				}]
			}
		}
	}
</script>

<style lang="less" stylesheet="less">
	.goods-list {
		font-family: "微软雅黑";
		font-size: 0.75rem;
		width: 1200px;
		margin: 0 auto;
		.classify {
			.classify-box {
				background-color: #f2f2f2;
				overflow: hidden;
				border-top: 1px solid #eeeeee;
				.box-title {
					float: left;
					width: 96px;
					text-align: center;
					div {
						/*margin: px;*/
						color: #afa4bd;
						line-height: 30px;
					}
				}
				.box-content {
					float: right;
					width: 1100px;
					background-color: #fafafa;
					ul {
						li {
							line-height: 30px;
							margin: 0 15px;
							display: inline-block;
						}
					}
				}
			}
		}
		.filter {
			width: 1200px;
			height: 44px;
			margin: 0 auto;
			margin-top: 15px;
			background-color: #fafafa;
			ul {
				li {
					height: 44px;
					box-sizing: border-box;
					/*border: 2px solid #fafafa;*/
					font-size: 0.9rem;
					box-sizing: border-box;
					line-height: 44px;
					display: inline-block;
					padding: 0 30px;
					&.here{
						background-color: white;
						color: red;
						border: 1px solid #f2f2f2;
					}
					span {
						margin: 3px;
						margin-bottom: -2px;
						display: inline-block;
						width: 14px;
						height: 14px;
						background-image: url("../assets/icon.png");
						background-repeat: no-repeat;
						background-position: 0 -112px;
					}
				}
			}
		}
		.all-goods{
			overflow: hidden;
		}
		.page-btns{
			text-align: center;
			margin-top: 60px;
			a{
				font-family: "微软雅黑";
				font-size: 0.9rem;
				display: inline-block;
				line-height: 28px;
				width: 28px;
				height: 28px;
				border: 1px solid black;
				border-radius: 5px;
				margin: 0 5px;
			}
		}
	}
</style>